<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心弹力球</title>
    <script src="../js/jquery-3.5.0.min.js"></script>
    <style>
        body{
            background: black;
        }

        #basketball {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 30px;
        }
    </style>
</head>

<body>
    <img src="../images/aim.png" alt="" id="basketball">
    <script>
        var verticalSpeed = 10;
        var verticalDistance = 0;
        var horizontalSpeed = 5;
        var horizontalDistance = 0;
        var winHeight = document.documentElement.clientHeight;
        var winWidth = document.documentElement.clientWidth;
        var timer = setInterval(function () {
            verticalDistance += verticalSpeed;
            horizontalDistance += horizontalSpeed;
            if (verticalDistance <= 0) {
                verticalSpeed = 10;
                verticalDistance = 0;
            }
            if (verticalDistance > winHeight - basketball.height) {
                verticalSpeed = -10;
                verticalDistance = winHeight - basketball.height;
            }
            if (horizontalDistance <= 0) {
                horizontalSpeed = 5;
                // horizontalDistance = 0;
            }
            if (horizontalDistance > winWidth - basketball.width) {
                horizontalSpeed = -5;
                horizontalDistance = winWidth - basketball.width;
            }
            $("#basketball").css({ "top": verticalDistance + 'px', "left": horizontalDistance + 'px' });
        }, 10)
    </script>
</body>

</html>